use yew::prelude::*;
// show list usage
mod showlist;

// generic Component
// render with choice
mod pageside;
// take value from input bar
mod inputbar;
// ref the Component
mod node_ref;
// With Component props in html!
mod htmlshow;
// change children props
mod nestedchildren;
// way to show elements
// dynamic / boolean / optional
mod elementshow;

// Event Type
// with wasm_bindgen::JsCast
mod eventJscast;
// with yew::TargetCast
mod eventTargetCast;
// not using Event 
mod eventNoderef;
// custom Event
//  using closure
mod eventSelfMake;
//  using concise
mod eventgloo;

// class set
mod classesshow;

// marco function Component
mod functioncomp;
// use iterator && map in html! show
mod iteratorshow;

// use_state, use_ref, use_mut_ref
mod hooktest;
// undo
mod selfhook;

// get the props such as style from parent
mod context;
mod route;

// include crate package
use classesshow::class_t::*;
use elementshow::element_t::*;
use eventJscast::event_t::*;
use eventNoderef::event_t::*;
use eventSelfMake::event_t::*;
use eventTargetCast::event_t::*;
use functioncomp::func_t::*;
use hooktest::hook_t::*;
use htmlshow::html_t::*;
use iteratorshow::iterator_t::*;
use nestedchildren::nest_t::*;
use node_ref::github_node_ref::*;
use pageside::pg_t::*;

use context::context_t::*;
use route::route_t::*;
// <div class="test page">
//     <Page<PageSidebar>>
//         <PageChild<PageSidebar> rd_alt=true obj={{html_nested!{<PageSidebar/>}}} />
//         <PageChild<PageSidebar> rd_alt=false obj={{html_nested!{<PageSidebar/>}}} />
//     </Page<PageSidebar>>
//     <Page<PageSidebar2>>
//         <PageChild<PageSidebar2> rd_alt=true obj={{html_nested!{<PageSidebar2/>}}} />
//         <PageChild<PageSidebar2> rd_alt=false obj={{html_nested!{<PageSidebar2/>}}} />
//     </Page<PageSidebar2>>
// </div>

// used to show the Component to
// render the standard html passage
struct ShowApp;
impl Component for ShowApp {
    type Message = ();
    type Properties = ();
    fn create(_ctx: &Context<Self>) -> Self {
        Self
    }

    fn view(&self, _ctx: &Context<Self>) -> Html {
        let props = HtmlProps {
            prop1: "Hello".to_owned(),
            prop2: "Hello".to_owned(),
        };
        // <p> style
        let style = "background: pink;".to_string();
        let sstyle = "background: grey;".to_string();
        let stand = html! {
            <div class="test page">
                <p style={style.clone()}>{"generic usage"}</p>
                // obj: Option<VChild<T>>
                <Page<PageSidebar>>
                    <PageChild<PageSidebar> rd_alt=true obj={{html_nested!{<PageSidebar/>}}} />
                    <PageChild<PageSidebar> rd_alt=false obj={{html_nested!{<PageSidebar/>}}} />
                </Page<PageSidebar>>
                <Page<PageSidebar2>>
                    <PageChild<PageSidebar2> rd_alt=true obj={{html_nested!{<PageSidebar2/>}}} />
                    <PageChild<PageSidebar2> rd_alt=false obj={{html_nested!{<PageSidebar2/>}}} />
                </Page<PageSidebar2>>
                <br/>

                <p style={style.clone()}>{"NodeRef hover effect"}</p>
                <NodeRefApp/>
                <br/>

                <p style={style.clone()}>{"Html Props Show"}</p>
                // no props
                <HtmlMyComponent />
                <br/>
                // two props and given with two value
                <MyComponentWithProps prop1="prop1" prop2="prop2" />
                <br/>
                // value from rust value
                <MyComponentWithProps ..props.clone() />
                <br/>
                // one half is given , one half is rust's
                <MyComponentWithProps prop2="prop2" ..props.clone() />
                <br/>
                // id: String
                // children: Children
                <HtmlChildren id="container">
                    // Children(1)
                    <h1>{"Hi"}</h1>
                    // Children(2)
                    <p>{"world"}</p>
                </HtmlChildren>
                <br/>

                <p style={style.clone()}>{"change children format"}</p>
                <NestList>
                    <ListItem value="a"/>
                    <ListItem value="b"/>
                    <ListItem value="c"/>
                </NestList>
                <br/>

                <p style={style.clone()}>{"show component element"}</p>
                <DynamicElementComp/>
                <br/>
                <BooleanElementComp/>
                <br/>
                <OptionalElementComp/>
                <br/>
                <ComponentHandlerElementComp/>
                <br/>

                <p style={style.clone()}>{"using JsCast"}</p>
                <JsCastEventComp/>
                <br/>
                <p style={style.clone()}>{"using TargetCast"}</p>
                <TargetCastEventComp/>
                <br/>
                <p style={style.clone()}>{"using NodeRef"}</p>
                <NodeRefComp/>
                <br/>
                <OtsNodeRefComp/>
                <br/>
                <EventSelfComp/>
                <br/>

                <p style={style.clone()}>{"class show"}</p>
                <ClassesComponent>
                    <h4>{"none"}</h4>
                </ClassesComponent>
                <br/>

                <p style={style.clone()}>{"function component"}</p>
                <p style={sstyle.clone()}>{"has props"}</p>
                <RenderedAt time={"12:00".to_owned()}/>
                <br/>
                <p style={sstyle.clone()}>{"has no props"}</p>
                <CounterFun />
                <br/>
                <p style={sstyle.clone()}>{"generic has props"}</p>
                <GenComp<i32> type_data="i32" data=100 />
                <br/>
                <GenComp<String> type_data="String" data={"hello world".to_string()} />
                <br/>

                <p style={style.clone()}>{"Iterator props"}</p>
                <IteratorComp/>
                <br/>
                <KeyListComp/>
                <br/>

                <p style={style.clone()}>{"use_state, use_ref, use_mut_ref"}</p>
                <HookUseState />
                <br/>
                <HookUseMutRef />
                <br/>
                <HookUseRef />
                <br/>

                <HookUseReducer />
                <br/>
                <HookUseEffect />
                <br/>
                <HookUseContext />
                <br/>

                <p style={style.clone()}>{"use context"}</p>
                <ContextShow />
                <br/>

                <p style={style.clone()}>{"route"}</p>
                <Main />
                <br/>
            </div>
        };
        stand
    }
}
fn main() {
    yew::start_app::<ShowApp>();
}
